<template>
    <div class="emp-manager-container">
      <!-- 搜索和按钮行 -->
      <!-- 搜索区域 -->
      <el-form inline :model="queryForm" style="text-align: left; position: relative;">
        <el-form-item label="姓名">
          <el-input v-model="queryForm.ename" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="部门">
              <el-select v-model="queryForm.deptno" placeholder="请选择所属部门" clearable filterable :disabled="roleid.includes(3)">
                <el-option  v-for="dept in deptList" :label="dept.dname" :value="dept.deptno" :key="dept.deptno"></el-option>
              </el-select>
            </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData()">查询</el-button>
        </el-form-item>
      </el-form>
        
  
      <!-- 员工表格 -->
      <el-table
        ref="multipleTable"
        :data="empList"
        tooltip-effect="dark"
        style="width: 100%"
        height="430px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="工号" width="120">
          <template slot-scope="scope">{{ scope.row.empno }}</template>
        </el-table-column>
        <el-table-column label="姓名" width="100">
          <template slot-scope="scope">{{ scope.row.ename }}</template>
        </el-table-column>
        <el-table-column label="性别" width="100">
          <template slot-scope="scope">{{ scope.row.sex_name }}</template>
        </el-table-column>
        <el-table-column label="所在部门">
          <template slot-scope="scope">{{ scope.row.dname }}</template>
        </el-table-column>
        <el-table-column label="出生日期">
          <template slot-scope="scope">{{ scope.row.birthday }}</template>
        </el-table-column>
        <el-table-column label="入职日期">
          <template slot-scope="scope">{{ scope.row.hiredate }}</template>
        </el-table-column>
      
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px;text-align: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[8, 10, 15, 20]"
        layout="prev, pager, next, total, sizes, jumper"
        :page-size="queryForm.limit"
        :total="total"
      ></el-pagination>
  
   
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'EmpList',
    data() {
      return {
        empList: [],
        roleid:[],
        deptList:[],
        deptno:'',
        queryForm: {
            deptno:'',
          ename: '',
          page: 1,
          limit: 8
        },
        total: 0
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.checkedEmpList = val
      },
      getTableData() {
        this.$http.post('/getEmps', this.queryForm).then(res => {
          this.empList = res.data.data
          this.total = res.data.count
        })
      },
      getDeptList(){
        this.$http.get("/getDepts").then(res => {
            this.deptList = res.data
        })
        },
      
      handleSizeChange(val) {
        this.queryForm.limit = val
        this.getTableData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getTableData()
      }
    },
    created() {
     const roleidStr = localStorage.getItem("roleid") || ''
     this.roleid = roleidStr.split(',').map(Number).filter(id=> !isNaN(id))
     this.deptno = Number(localStorage.getItem("deptno")) 
     if (this.roleid.includes(3)) {
        this.queryForm.deptno = this.deptno
     }
      this.getTableData()
      this.getDeptList()
    }
  }
  </script>
  
  